<template>
    <div class="QuestionBank">
        <div class="TeachingPlanTop">
            <div class="planName">
                <p class="planNameText">题目ID：</p>
                <el-input
                v-model="subjectTitle"
                placeholder="请输入题目ID"
                ></el-input>
            </div>
            
            <div class="grade">
                <p>年级：</p>
                <el-select v-model="gradeValue" placeholder="请选择年级">
                    <el-option
                        v-for="item in gradeOptions"
                        :key="item.typeId"
                        :label="item.typeName"
                        :value="item.typeId"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="subject">
                <p>学科：</p>
                <el-select v-model="subjectSelectValue" placeholder="请选择学科">
                    <el-option
                        v-for="item in subjectOptions"
                        :key="item.typeId"
                        :label="item.typeName"
                        :value="item.typeId"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="question">
                <p>题型：</p>
                <el-select v-model="questionTypeValue" placeholder="请选择题型">
                    <el-option
                        v-for="(item,index) in arr"
                        :key="index"
                        :label="item.typeName"
                        :value="item.type"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="moreBtn">
                <el-button
                    type="primary"
                    @click="searchBtn"
                    class="searchBtn"
                    icon="el-icon-search"
                >查询</el-button>
                <el-button type="primary" class="reset" icon="el-icon-refresh" @click="reset">
                    重置
                </el-button>
                <!-- <el-button
                    type="primary"
                    @click="refreshBtn"
                    class="refreshBtn"
                    icon="el-icon-refresh"
                >导入</el-button> -->
                <el-upload class="upload-demo" name="file" action="action" :show-file-list="false" :http-request="fileChange">
                    <el-button type="primary" class="daoru">
                        <span class="icon iconfont icon-daoru"></span>
                        导入
                    </el-button>
                </el-upload>
                <el-button type="primary" class="newAdd" @click="addCollege">
                    <i class="el-icon-plus"></i>
                    新增
                </el-button>

            </div>
        </div>
        <div class="TeachingPlanBottom">
            <div class="operationBtns">
                 <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        :header-cell-style="{ textAlign: 'center', background: '#f3f8fc' }"
                        :cell-style="{  textAlign: 'center' }"
                        >
                       
                       <el-table-column label="ID" prop="questionsId" width="50"></el-table-column>
                        <el-table-column prop="typeName" label="学科"></el-table-column>
                        <el-table-column prop="questionsTypeClone" label="题型" > </el-table-column>
                        <el-table-column prop="questionsStems" label="题干">
                            <template slot-scope="scope">
                                <div class="upLoadImgAndT">
                                    <div class="uploadImg" v-html="scope.row.questionsStems"></div>
                                    <!-- <img class="uploadImg" :src="" alt="" /> -->

                                </div>
                            </template>
                            
                        </el-table-column>
                        <el-table-column prop="grades" label="分数"> </el-table-column>
                        <el-table-column prop="difficulty" label="难度"> </el-table-column>
                        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
                        <el-table-column prop="address" label="操作">
                        <template slot-scope="scope">
                        <div class="moreBtn">
                            <!-- <el-button
                                type="success"
                                @click="preview(scope.row)"
                                class="searchBtn"
                            >预览</el-button> -->
                            <span @click="preview(scope.row)" >预览</span>
                            <!-- <el-button
                                type="primary"
                                @click="edit(scope.row)"
                                class="refreshBtn"
                            >编辑</el-button> -->
                            <span
                                class="icon edit"
                                @click="edit(scope.row)"
                            >编辑</span>
                            
                            <span
                                class="icon del"
                                @click="remove(scope.row)"
                            >删除</span>
                            <!-- <el-button
                                type="danger"
                                @click="remove(scope.row)"
                                class="searchBtn"
                            >删除</el-button> -->
                        </div>
                    </template>
                        </el-table-column>
                    </el-table>
                <div class="block" v-show="tableData.length > 0">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="10"
                        prev-text="上一页"
                        next-text="下一页"
                        layout="prev, pager, next, jumper"
                        ref="pagination"
                        :total="total"
                    >
                    </el-pagination>
                    <el-button class="sure" type="primary">确定</el-button>
                </div>
            
            </div>
            <el-dialog
                title="预览"
                :visible.sync="dialogFormVisible"
                width="700"
                height="400"
            >
            <div class="infoDialog">
                <div class="grade">
                    <div class="gradeBox">
                        <p class="infoGreade">年级：</p>
                        <p class="infoGreade">{{lookInfo.gradeName}}</p>
                    </div>
                    <div class="subject">
                        <p>学科：</p>
                        <p>{{lookInfo.subject}}</p>
                    </div>
                </div>
                <div class="testQuestions">
                    <p>试题类型：</p>
                    <p>{{lookInfo.questionsTypeClone}}</p>
                </div>
                <div class="stem">
                    <p>题干：</p>
                    <p>{{lookInfo.questionsStems}}</p>
                </div>
                <div class="bidAnswers">
                    <p>标答：</p>
                    <p>{{answerNofixed}}</p>
                </div>
                <div class="analysis">
                    <p>解析：</p>
                    <p>{{lookInfo.parse}}</p>
                </div>
                <div class="fraction">
                    <p>分数：</p>
                    <p>{{lookInfo.grades}}</p>
                </div>
                <div class="difficulty">
                    <p>难度：</p>
                    <p>{{lookInfo.difficulty}}</p>
                </div>
                <div class="Knowledge">
                    <p>知识点：</p>
                    <p>{{lookInfo.knowledgePoint}}</p>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="cancel" @click="cancel"
                    >取 消</el-button
                >
                <el-button class="determine" type="primary" @click="sureBtn"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
        </div>
    </div>
</template>

<script>
import {
    getQuertionBankListApi,
    removeQuertionBankApi,
    infoQuertionBankApi,
    getGradeListApi,
    getCourseListApi,
    ImportExaminationRoomApi
} from "@/api/onlinehomework/questionbank.js"
import imgs from "../../../assets/logo.png"
export default {
    name:'QuestionBank',
    data() {
        return {
            subjectTitle:'',  // 题目名称
            gradeValue:'', //年级id
            gradeOptions:[], //年级下拉数据
            tableData:[],  //  table数据
            currentPage:1, // 页码
            isLoading:false,
            subjectSelectValue:'', // 学科id
            subjectOptions:[
                // {
                //     name:'数学'
                // },
                // {
                //     name:'语文'
                // }
            ],  // 学科下拉框数据
            questionTypeValue:'',  // 题型id
            selectClassFlag:false,
            total:0,  // 总数据
            arr:[
                {
                    type:0,
                    typeName:'单选题'
                },
                {
                    type:1,
                    typeName:'多选题'
                },
                {
                    type:2,
                    typeName:'判断题'
                },
                {
                    type:3,
                    typeName:'填空题'
                },
                {
                    type:4,
                    typeName:'简答题'
                },
            ],
            dialogFormVisible:false,
            lookInfo:{}, // 查看详细信息
            answerNofixed:'',
            aa:imgs
        }
    },
    mounted() {
        document.getElementsByClassName(
            "el-pagination__jump"
        )[0].childNodes[0].nodeValue = "跳到第";
        getCourseListApi({parentId: 130}).then(res=>{
            console.log(res);
            this.subjectOptions = res.rows
        })
        this.getQuertionBankList()
        getGradeListApi({parentId: 55}).then(res=>{
            console.log(res,'------------');
            this.gradeOptions = res.rows
        })
        console.log(imgs)
        
        
    },
    methods:{
        cancel() {
            this.dialogFormVisible = false
        },
        sureBtn() {
            this.dialogFormVisible = false
        },
        // 预览
        preview(row) {
            console.log(row)
            this.dialogFormVisible = true
            if(row.questionsId) {
                infoQuertionBankApi({questionsId:row.questionsId}).then(res=>{
                    console.log(res,'===========');
                    this.lookInfo = res.data
                    this.answerNofixed=res.data.answerNofixed.split(',true').toString()
                    // this.answerNofixed.split('true')
                    console.log(this.answerNofixed,'22222222')
                    this.subjectOptions.forEach(it=>{
                        if(it.typeId == row.subject) {
                            this.lookInfo.subject = it.typeName
                        }
                    })
                    this.gradeOptions.forEach(it=>{
                        console.log(it);
                        if(it.typeId == row.grade) {
                            this.lookInfo.gradeName = it.typeName
                        }
                    })
                    if(this.lookInfo.questionsType == '0') {
                        this.lookInfo.questionsTypeClone = '单选题'
                    }else if(this.lookInfo.questionsType == '1') {
                        this.lookInfo.questionsTypeClone = '多选题'
                    }else if(this.lookInfo.questionsType == '2') {
                        this.lookInfo.questionsTypeClone = '判断题'
                    }else if(this.lookInfo.questionsType == '3') {
                        this.lookInfo.questionsTypeClone = '填空题'
                    }else if(this.lookInfo.questionsType == '4') {
                        this.lookInfo.questionsTypeClone = '简答题'
                    }
                })
            }
        },
        fileChange(files) { 
            let formData = new FormData(); 
            formData.append('file', files.file);
            ImportExaminationRoomApi(formData).then((res) => {
                console.log(res);
            });
        },
        // 修改
        edit(row) {
            console.log('222',row)
            // this.gradeOptions.filter(item=>{
            //     return item.
            // })
            // getGradeListApi().then(res=>{
            //     console.log(res,'------------');
            //     // this.gradeOptions = res.rows
            // })
            // this.subjectTitle = 
            
            this.$router.push({
                path:'/onlinehomework/testpaper/new',
                name:"new",
                params:{
                    tabIndex:row.questionsType,
                    row:row.questionsId,
                    isEdit:'1',
                    currentPage:this.currentPage
                }
            })
            this.getQuertionBankList()
        },
        reset() {
            this.subjectTitle = ''
            this.gradeValue = ''
            this.subjectSelectValue = ''
            this.questionTypeValue = ''
            this.getQuertionBankList()
        },
        // 删除
        remove(row) {
            console.log(row);
            this.$confirm("确认删除记录吗?", "提示", {
                type: "warning",
                }).then(() => {
                    removeQuertionBankApi({questionsId:row.questionsId}).then(res=>{
                        if(res.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功',
                            });
                        }else {
                            this.$message({
                                type: 'error',
                                message: '删除失败',
                            });
                        }
                        this.getQuertionBankList()
                    })
                }).catch(() => {
                
            });
     
            
        },
        // 获取列表数据
        getQuertionBankList(obj) {
            getQuertionBankListApi({...obj,pageNum:this.currentPage,pageSize:'10'}).then(res=>{
                console.log(222222222);
                if(res.code === 200) {
                    this.tableData = res.rows
                    this.total = res.total
                    getGradeListApi({parentId:130}).then(res=>{
                        console.log(res);
                        this.subjectOptions = res.rows
                    })
                    getGradeListApi({parentId: 55}).then(res=>{
                        console.log(res,'------------');
                        this.gradeOptions = res.rows
                    })
                    console.log(this.subjectOptions,'-----222222222');

                    this.tableData.forEach(item=>{
                        // console.log(this.subjectOptions);
                        // this.$nextTick(()=>{
                            this.subjectOptions.forEach(it=>{
                                // console.log(it);
                                if(it.typeId == item.subject) {
                                    // console.log(item);
                                    item.subject1 = it.typeName
                                }
                            })
                        // })
                    //     item.questionsStems = this.removeHtmlStyle(item.questionsStems)
                        if(item.questionsType == '0') {
                            item.questionsTypeClone = '单选题'
                        }else if(item.questionsType == '1') {
                            item.questionsTypeClone = '多选题'
                        }else if(item.questionsType == '2') {
                            item.questionsTypeClone = '判断题'
                        }else if(item.questionsType == '3') {
                            item.questionsTypeClone = '填空题'
                        }else if(item.questionsType == '4') {
                            item.questionsTypeClone = '简答题'
                        }
                    })
                    // this.tableData.filter(item=>{

                    // })
                    console.log(this.tableData,'----');
                }
            })
            
        },
        removeHtmlStyle (html) {
            let relStyle = /style\s*?=\s*?([‘"])[\s\S]*?\1/g; //去除样式
            let relTag = /<.+?>/g; //去除标签
            let relClass = /class\s*?=\s*?([‘"])[\s\S]*?\1/g;// 清除类名
            let newHtml = "";
            if (html) {
                newHtml = html.replace(relStyle, "");
                newHtml = newHtml.replace(relTag, '');
                newHtml = newHtml.replace(relClass, '');
            }
            return newHtml;
        },
        // 搜索
        async searchBtn() {
            // let obj = {
            //     // questionsId:this.questionTypeValue,
            //     grade:this.gradeValue,
            //     subject:this.subjectSelectValue,
            //     questionsType:this.questionTypeValue
            // }
            let obj = {
                grade:this.gradeValue,
                subject:this.subjectSelectValue,
                questionsType:this.questionTypeValue,
                questionsId:this.subjectTitle
            };
            console.log(obj);
            let obj1 = {};
            for (let key in obj) {
                if (
                (obj[key] === 0 || obj[key]) &&
                obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
                ) {
                // 保存属性
                obj1[key] = obj[key];
                }
            }
            console.log(obj1);
            this.getQuertionBankList(obj1)
        },

        // 重置
        refreshBtn() {},
        
        
        // table选中事件
        selectionChange() {},

        // 分页事件
        handleSizeChange() {},
        handleCurrentChange() {
            this.getQuertionBankList()
        },
        // 创建题目
        addCollege() {
            this.$router.push({
                path:'/onlinehomework/testpaper/new',
                name:"new",
                params:{
                    tabIndex:'0',
                    row:'0',
                    isEdit:'0',
                    currentPage:this.currentPage
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.QuestionBank{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    .TeachingPlanTop {
        min-width: 100vh;
        width: 100%;
        // height: 80px;
        display: flex;
        font-size: 14px;
        // justify-content: space-between;
        align-items: center;
        background: #fff;
        flex-wrap: wrap;
        border-radius: 10px;
        padding: 0 20px;
        // box-shadow: 0px 4px 3px #ccc;

        .planName,
        .question,
        .subject,
        .grade {
            display: flex;
            flex-wrap: nowrap;
            text-align: center;
            align-items: center;
            margin: 20px 0;
            width: 220px;
            p {
                text-align: right;
                width: 112px;
            }
            .el-input{
                width: 170px;
            }
        }
        .planName .planNameText{
            width: 70px;
        }
        .moreBtn {
            width: 300px;
            margin: 20px;
            display: flex;
            .searchBtn {
                color: white;
                border: none;
                background-color: rgb(123, 180, 208);
            }
            .refreshBtn {
                color: white;
                border: none;
                background-color: rgb(108, 207, 204);
            }
            .newAdd {
                border: none;
                background-color: rgb(86, 164, 212);
            }
            .reset{
                background: rgb(108, 207, 204);
                border: none;
            }
            .daoru{
                background: #66c8e3;
                border: none;
                margin: 0 10px;
            }
        }
    }
    .TeachingPlanBottom {
        width: 100%;
        flex: 1;
        background-color: white;
        padding: 0 20px;
        margin-top: 10px;
        border-radius: 10px;
        box-sizing: border-box;
        min-width: 100vh;
        // .infoTeachingPlanBottom {
        height: 100%;

        // .avatar-uploader .el-upload {
        //     border: 1px dashed #d9d9d9;
        //     border-radius: 6px;
        //     cursor: pointer;
        //     position: relative;
        //     overflow: hidden;
        // }
        // .avatar-uploader .el-upload:hover {
        //     border-color: #409EFF;
        // }
        // .avatar-uploader-icon {
        //     font-size: 28px;
        //     color: #8c939d;
        //     width: 178px;
        //     height: 178px;
        //     line-height: 178px;
        //     text-align: center;
        // }
        // .avatar {
        //     width: 178px;
        //     height: 178px;
        //     display: block;
        // }



        .operationBtns {
            width: 100%;
            // height: 60px;
            // display: flex;
            // align-items: center;
            margin-top: 10px;
            // flex-direction: column;
            // justify-content: space-between;
            .setBtnsLeftTitle {
                width: 200px;
                font-size: 16px;
                font-weight: 600;
                color: rgb(57, 141, 220);
                p {
                    width: 100px;
                }
            }
            .moreBtn{
                display: flex;
                justify-content: space-around;
                span{
                    cursor: pointer;
                    color: #1990FF;

                }
            }
        }
        .tableData {
            width: 100%;
            overflow-y: auto;
            .haed {
                cursor: pointer;
                align-items: center;
                color: rgb(135, 173, 218);
                .setPlan{
                margin-left: 10px;
                }
            }

            ::v-deep .el-table thead tr {
                background-color: #f2f8fb !important;
            }
            ::v-deep .el-table tr:nth-child(2n) {
                background-color: #f9f9f9;
            }
            .edit {
                // width: 15px;
                // height: 15px;
                margin-left: 10px;
                // font-weight: bold;
                color: #1990FF;
                cursor: pointer;
            }
            .del {
                // width: 15px;
                // height: 15px;
                // font-weight: bold;
                margin-left: 10px;
                color: #1990FF;
                cursor: pointer;
            }
            ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
            .el-checkbox__input.is-indeterminate .el-checkbox__inner {
                background-color: #86caf0;
                border-color: #86caf0;
            }

            ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
                background-color: #86caf0;
                border-color: #86caf0;
            }
            .el-icon-delete {
                color: red;
                font-weight: bold;
                margin-left: 15px;
                font-size: 18px;
            }
            .el-icon-edit-outline {
                font-size: 18px;
                font-weight: bold;
                color: rgb(142, 198, 216);
            }
            .share {
                margin-left: 15px;
            }
            ::v-deep .el-checkbox__input .is-checked .el-checkbox__inner {
                background: red !important;
            }
        }
    }
    ::v-deep .el-dialog{
        width: 600px;
        height: 550px;
        border-radius: 10px 10px 0 0;
        .el-dialog__header {
            border-radius: 10px 10px 0 0;
            text-align: center;
            background-color: rgb(72, 149, 219);
            .el-dialog__title {
                color: #fff;
            }
            .el-dialog__headerbtn .el-dialog__close {
                color: #fff;
            }
        }
        .dialog-footer {
            text-align: center;
            button {
                width: 100px;
                height: 35px;
                border-radius: 16px;
                line-height: 0;
            }
            .cancel {
                border: none;
                color: #848383;
                background-color: #f0f0f0;
            }
            .determine {
                border: none;
                background-color: #4995dc;
            }
        }
        .infoDialog{
            // width: 700px;
            // height: 500px;
            .grade{
                width: 100%;
                height: 50px;
                .gradeBox{
                    display: flex;
                    margin-bottom: 10px;
                    p:first-child{
                        width: 80px;
                    }
                }
                .subject{
                    display: flex;
                    p:first-child{
                        width: 80px;
                    }
                }
            }
            .testQuestions,
            .stem,
            .bidAnswers,
            .analysis,
            .fraction,
            .difficulty,
            .Knowledge
            {
                display: flex;
                width: 100%;
                height: 40px;
                align-items: center;
                p:first-child{
                    width: 80px;
                    // text-align: right;
                }
            }
        }
    }
    .block {
        padding: 0 20px 0 0;
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: right;
        background-color: #fff;

        ::v-deep .btn-prev {
        border: solid 1px #e6e6e6;
            border-radius: 5px;
            color: #6f6f6f;
        }

        ::v-deep .btn-next {
            border: solid 1px #e6e6e6;
            border-radius: 5px;
            color: #6f6f6f;
        }
        ::v-deep .el-pager li {
            background: #fff;
            font-size: 13px;
            min-width: 30.5px;
            height: 28px;
            line-height: 28px;
            box-sizing: border-box;
        }

        ::v-deep .el-pager li.active {
            background-color: #4895db;
            color: #fff;
            cursor: default;
        }
        ::v-deep .number {
            border: solid 1px #e6e6e6;
            margin: 0 5px;
            border-radius: 5px;
            color: #6f6f6f;
        }
        ::v-deep .el-button {
            height: 28px;
            line-height: 0;
        }
        .sure {
            width: 50px;
            height: 30px;
            line-height: 0;
            text-align: center;
            padding: 0;
        }
    }
}
</style>